<template>
	<view class="search-input">
		<div class="searchs1">
			<!-- <input type="text" class="searchs" @tap="handleToSearch"  placeholder="搜索订单"/> -->
			<div class="teb1">
				<!-- 顶部teb栏 -->
					<view class="head-nav">
						<view :class="navIndex==0?'activite':''" @click="checkIndex(0,'')">全部</view>
						<view :class="navIndex==1?'activite':''" @click="checkIndex(1,0)">未上架</view>
						<view :class="navIndex==2?'activite':''" @click="checkIndex(2,1)">已在售	</view>
					
					</view>
				
			</div>
		</div>
		<!-- teb 栏内容 -->
		<div class="teb2">
			
			<!-- 内容切换 -->
			<view class="content">
					<div class="contents" v-for="i in allProducts">
							<img :src=i.dtPic1 alt="" class="imgs">
							<p class="size">{{i.receiverAddress}}</p>
							<p class="size1">{{i.productName}}</p>
							<p class="size2">{{i.saleStatus==1?'未删除':'已删除'}}</p>
							<!-- <p class="size2">{{i.status==0?'未支付':i.status==1?'已支付，待配送':i.status==2?'已配送':i.status==3?'已送达':i.status==4?'商家已拒绝':i.status==5?'商家已拒绝':'已拒收'}}</p> -->
							<p class="font">共：<span class="font1">{{i.countNumber}}</span>{{i.unit}} ￥{{i.unitPrice}}</p>
							<p class="dizhi1" v-if="i.productCreateDate">保质期至：{{i.productCreateDate.substring(0,10)}}</p>
							<p class="btn">
								<span :class='i.saleStatus==1?"ps":"jj"' @click="change(i.id,i.saleStatus)">{{i.saleStatus==1?'下架':'上架'}}</span>
							</p>
					</div>
			</view>
		</div>
				<!-- 底部teb栏 -->
		<!-- <TabBar currentPage="index"></TabBar> -->
	</view>
</template>

<script>
	import TabBar from '@/pages/common/components/TabBar.vue'
	import { mapState } from 'vuex';
	import { queryAllProducts,queryProductsByExr,updateOrder,updateProduct,queryProductsByPrarm } from '@/api/new1.js'
	
import { log } from 'util'
	export default {
		name: 'Input',
		data () {
			return {
				navIndex: 0,
				allProducts:[],
				updateProduct:[],
				updateOrder:[],
				queryProductsByPrarm:[],
			}
		},
		components: {
			TabBar
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		
		mounted () {
			this.navIndex = 2
			let data = {
				saleStatus:1,
				storeId: this.userInfo.storeId
			}
			queryProductsByExr(data).then(res => {
				this.allProducts = res.data.data
			})
		},
		methods: {
			checkIndex(index,status) {
				this.navIndex = index;
				let data = {
					saleStatus:status,
					storeId: this.userInfo.storeId
				}
				queryProductsByExr(data).then(res => {
					this.allProducts = res.data.data
				})
			},
			handleToSearch () {
				uni.navigateTo({
				    url: '/pages/search/search'
				});
			},
			change(id,statu){
				let data = {
					saleStatus:statu==1?0:1,
					id:id
				}
				updateProduct(data).then(res => {
					var data1 = {
						saleStatus:status
						}
					queryProductsByPrarm(data1).then(res => {
						this.allProducts = res.data.data
					})
				})
		  },
		},
	}
</script>

<style scoped>
	
	.search-input {
			font-size: 28rpx;
	}
	.searchs1{
			width: 100%;
			height: 120rpx;
			background: #5571D6;
	}
	.searchs {
		   width: 80%;
		   font-size: 28rpx;
		   border: 1px solid #aaa;
		   border-radius: 8rpx;
		   height: 60rpx;
		   line-height: 60rpx;
		   margin: 5rpx 8rpx;
		   padding: 0 20rpx;
		   background: #fff;
		   border-radius:25px;
		   margin-left: 27px;
		   position: absolute;
		   top: 20px;

	}
	.head-nav {
			margin-top: -40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #CCCCCC;
		}
	
		.activite {
			color: #fff;
			font-size: 16px;
			text-decoration:underline
		}
	
		.head-nav>view {
			padding-bottom: 10rpx;
		}
	
		.content {
			/* background: #008000; */
			height: 100%;
		}
	  .teb1{
		   margin-right: 17%;
		   padding-top: 11%;
		   padding-left: 8%;
		   color: #fff;
		   font-size: 14px;
	  }
	  .teb2{
		  margin-top: 60rpx;
	  }
	  .content .contents{
		  width: 100%;
		  height: 108px;
		  border-bottom: 1px solid #E4E4E4;
	  		  
	  }
	  .content .contents img{
		  width: 90px;
		  height: 90px;
		  margin-left: 10px;
	  }
	  .size{
		  font-size: 24rpx;
		  color: #000;
		  position: relative;
          bottom: 120% !important;
		  left: 31%;
	  }
	  .size1{
		width: 150px;
	  	font-size: 12px;
		font-weight: 600;
	  	color: #000;
	  	position: relative;
	    bottom: 80%;
	  	left: 31%;	
		word-wrap:break-word; 
		word-break:break-all;
	  }
	  .font{
	  	font-size: 9px;
	  	color: #000;
	  	position: relative;
	    bottom: 71%;
	  	left: 31%;
		font-weight: bold;
	  }
	  .font1{
	  	font-size: 9px;
	  	color: #000;
		font-weight: bold;
	  }
	  .dizhi{
		  font-weight: bold;
		  font-size: 9px;
		  width: 89px;
		  position: relative;
		  bottom: 110%;
		  left: 74%;
		  overflow:hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		  -o-text-overflow:ellipsis;
	  }
	  .dizhi1{
	  		  /* font-weight: bold; */
	  		  font-size: 18rpx;
	  		  position: relative;
	  		  bottom: 100%;
	  		  left: 31%;
	  		 /* overflow:hidden;
	  		  white-space: nowrap;
	  		  text-overflow: ellipsis;
	  		  -o-text-overflow:ellipsis; */
	  }
	.btn{
		position: relative;
		bottom: 30%;
	}
	  .ps{
		  font-size: 26rpx;
		  display: inline-block;
		  background: aqua;
		  color: cornflowerblue;
		  text-align: center;
		  position: absolute;
		  left: 30%;
		  bottom: 26px;
		  width: 53px;
		  border-radius: 10px;
	  }
     .jj{
	  		background: bisque;
	  		font-size: 24rpx;
	  		display: inline-block;
	  		color: cornflowerblue;
	  		text-align: center;
	  		position: absolute;
	  		left: 30%;
	  		bottom: 24px;
	  		width: 53px;
	  		border-radius: 10px;
	  }
	  .hj{
	  		font-size: 8px;
			font-weight: bold;
	   		/* width: 53px;	 */
	  		position: relative;
	  		bottom: 88%;
	  		left: 75%;
	  		border-radius: 10px;
	   }
	   .size2{
			width: 150px;
			font-size: 12px;
			color: #000;
			position: relative;
			bottom: 83%;
			left: 78%;
			word-wrap: break-word;
			word-break: break-all;
	   }
</style>
